import React from 'react'
import {
  Text,
  View,
  SafeAreaView,
  useColorScheme,
  StatusBar,
  LogBox
} from 'react-native'

import { NavigationContainer, DarkTheme, DefaultTheme } from '@react-navigation/native'
import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import { RootSiblingParent, RootSiblingPortal } from 'react-native-root-siblings'

import Icon from 'react-native-vector-icons/Ionicons'

import { observer } from 'mobx-react-lite'

import {
  HomeScreen,
  BookScreen,
  ShelfScreen,
  LookScreen,
  MeScreen,
  BookListScreen,
  ReaderScreen,
  ChapterListScreen,
  SearchScreen,
  MallScreen,
} from './src/screens'
import i18n from './src/i18n'
import { useStores } from './src/stores'

LogBox.ignoreLogs([`Warning`])


const mainStack = createStackNavigator()
const Tab = createBottomTabNavigator()

const screenOptions = ({ route }) => ({
  tabBarIcon: ({ focused, color, size }) => {
    let iconName

    switch (route.name) {
      case 'Home':
        iconName = 'eye-outline'
        break
      case 'Shelf':
        iconName = 'bookmarks-outline'
        break
      case 'Social':
        iconName = 'book-outline'
        break
      case 'Me':
        iconName = 'person-outline'
        break
    }

    // You can return any component that you like here!
    return <Icon name={iconName} size={size} color={color} />;
  }
})

const TabScreen = observer(() => {
  const { appearance: ap } = useStores()
  return (
    <Tab.Navigator screenOptions={screenOptions} sceneContainerStyle={{ backgroundColor: ap.theme.background }}>
      <Tab.Screen name='Home' component={HomeScreen} options={{ title: i18n.t('look') }} />
      <Tab.Screen name='Social' component={LookScreen} options={{ title: i18n.t('social') }} />
      <Tab.Screen name='Shelf' component={ShelfScreen} options={{ title: i18n.t('shelf') }} />
      <Tab.Screen name='Me' component={MeScreen} options={{ title: i18n.t('me') }} />
    </Tab.Navigator >
  )
})

export default observer(() => {
  const { appearance } = useStores()
  return (
    <RootSiblingParent>
      <NavigationContainer theme={appearance.name == 'dark' ? DarkTheme : DefaultTheme}>
        <StatusBar
          barStyle={appearance.name == 'dark' && 'light-content' || 'dark-content'}
          backgroundColor={appearance.theme.background}
          animated={true}
        />

        <mainStack.Navigator sceneContainerStyle={{ backgroundColor: appearance.theme.background }}>
          <mainStack.Screen name='Tab' component={TabScreen}
            options={{
              headerShown: false, title: i18n.t('back'),
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
            }} />
          <mainStack.Screen name='Book' component={BookScreen}
            options={{
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              headerShown: true
            }} />

          <mainStack.Screen name='BookList' component={BookListScreen}
            options={{
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              headerShown: true
            }} />

          <mainStack.Screen name='Reader' component={ReaderScreen}
            options={{
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              headerShown: false
            }}
          />
          <mainStack.Screen name='ChapterList' component={ChapterListScreen}
            options={{
              cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
              headerShown: true
            }}
          />
          <mainStack.Screen name='Search' component={SearchScreen}
            options={{
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              headerShown: false,
            }}
          />

          <mainStack.Screen name='Mall' component={MallScreen}
            options={{
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              headerShown: false,
            }}
          />
        </mainStack.Navigator>
      </NavigationContainer>
    </RootSiblingParent>
  )
})
